<template>
  <div class="order-remark-wrapper" v-show="remarkShow">
    <mt-header title="额外信息">
    </mt-header>
    <!--固化备注-->
    <div class="fix-remark">
      <h1 class="title">快速备注</h1>
      <zl-checkList :dataSource="fixRemark"></zl-checkList>
    </div>
    <!--自定义备注-->
    <div class="input-container">
      <h1 class="title">其他备注</h1>
      <div class="textarea-wrapper">
        <yd-textarea placeholder="口味/偏好等" maxlength="100" @input="onRemarkChanged"></yd-textarea>
      </div>
    </div>
    <div class="buttongroup">
      <mt-button size="normal" type="danger" @click.native="remarkShow=false">取消</mt-button>
      <mt-button size="normal" type="primary" @click.native="handleClick">确定</mt-button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {CellGroup, CellItem} from 'vue-ydui/dist/lib.px/cell';
  import {TextArea} from 'vue-ydui/dist/lib.px/textarea';
  import {Header, Button} from 'mint-ui';
  import checkList from '../../components/checkList/checkList.vue';

  export default {
    data() {
      return {
        fixRemark: ['多餐具', '微糖', '半糖', '无糖', '多给蜡烛', '微辣', '需要生日帽'],
        remark: '',
        remarkShow: false
      };
    },
    props: {
      order: {
        type: Object,
        default: null
      }
    },
    name: 'orderRemark',
    components: {
      'yd-cell-group': CellGroup,
      'yd-cell-item': CellItem,
      'yd-textarea': TextArea,
      'm-header': Header,
      'zl-checkList': checkList,
      'mt-button': Button
    },
    methods: {
      onRemarkChanged(s) {
        this.remark = s;
      },
      show() {
        this.remarkShow = true;
      },
      handleClick() {
        if (this.order) {
          this.order.remark = this.remark;
        }
        this.remarkShow = false;
      }
    },
    computed: {}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .order-remark-wrapper
    position fixed
    top 0
    bottom 0
    height 100%
    z-index 1001
    background-color rgb(245, 246, 246)
    width 100%
    .mint-header
      background #141d27
    .fix-remark
      margin 12px
      box-shadow: 1px 1px 10px #888888;
      background-color #fff
      display flex
      flex-direction column
      justify-content center
      align-items left
      .title
        font-size 16px
        font-weight 700px
        margin 12px
    .input-container
      padding 12px
      margin 12px
      box-shadow: 1px 1px 10px #888888;
      background-color #fff
      .title
        font-size 16px
        font-weight 700px
      .textarea-wrapper
        margin-top 12px
        border: 1px solid silver
        padding 5px
    .buttongroup
      position absolute
      right 12px
</style>
